<!DOCTYPE html>
<html lang="en" xmlns:th=www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;">
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $(function () {
        $.ajax({
            type:'get',
            url:"/echarts/list",
            dataType:"json",
            success: function (data) {
                var name =new Array();
                var count =new Array();

                $.each(data,function (index,info) {
                   name[index] = info.name;
                   count[index] = info.count;
               })
               console.log((data))
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                option = {
                    backgroundColor: '#1b1b1b',
                    tooltip: {
                        formatter: "{a} <br/>{c} {b}"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: '总经理',
                        type: 'gauge',
                        min: 0,
                        max: 10,
                        splitNumber: 10,
                        radius: '50%',
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [0.09, 'lime'],
                                    [0.82, '#1e90ff'],
                                    [1, '#ff4500']
                                ],
                                width: 3,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: { // 坐标轴小标记
                            textStyle: { // 属性lineStyle控制线条样式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: { // 坐标轴小标记
                            length: 15, // 属性length控制线长
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: 'auto',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        splitLine: { // 分隔线
                            length: 25, // 属性length控制线长
                            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                                width: 3,
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        pointer: { // 分隔线
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 5
                        },
                        title: {
                            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 20,
                                fontStyle: 'italic',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        detail: {
                            backgroundColor: 'rgba(30,144,255,0.8)',
                            borderWidth: 1,
                            borderColor: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 5,
                            offsetCenter: [0, '50%'], // x, y，单位px
                            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        },
                        data: [{
                            value: count[0],
                            name: '总经理'
                        }]
                    },
                        {
                            name: '销售员',
                            type: 'gauge',
                            center: ['25%', '55%'], // 默认全局居中
                            radius: '30%',
                            min: 0,
                            max: 7,
                            endAngle: 45,
                            splitNumber: 7,
                            axisLine: { // 坐标轴线
                                lineStyle: { // 属性lineStyle控制线条样式
                                    color: [
                                        [0.29, 'lime'],
                                        [0.86, '#1e90ff'],
                                        [1, '#ff4500']
                                    ],
                                    width: 2,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: { // 坐标轴小标记
                                textStyle: { // 属性lineStyle控制线条样式
                                    fontWeight: 'bolder',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisTick: { // 坐标轴小标记
                                length: 12, // 属性length控制线长
                                lineStyle: { // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: { // 分隔线
                                length: 20, // 属性length控制线长
                                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {
                                width: 5,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                offsetCenter: [0, '-30%'], // x, y，单位px
                                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                //backgroundColor: 'rgba(30,144,255,0.8)',
                                // borderWidth: 1,
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                width: 80,
                                height: 30,
                                offsetCenter: [25, '20%'], // x, y，单位px
                                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    color: '#fff'
                                }
                            },
                            data: [{
                                value: count[1],
                                name: '销售员'
                            }]
                        },
                        {
                            name: '员工数',
                            type: 'gauge',
                            center: ['75%', '50%'], // 默认全局居中
                            radius: '30%',
                            min: 0,
                            max: 2,
                            startAngle: 135,
                            endAngle: 45,
                            splitNumber: 2,
                            axisLine: { // 坐标轴线
                                lineStyle: { // 属性lineStyle控制线条样式
                                    color: [
                                        [0.2, 'lime'],
                                        [0.8, '#1e90ff'],
                                        [1, '#ff4500']
                                    ],
                                    width: 2,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisTick: { // 坐标轴小标记
                                length: 12, // 属性length控制线长
                                lineStyle: { // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {
                                textStyle: { // 属性lineStyle控制线条样式
                                    fontWeight: 'bolder',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                },
                                formatter: function(v) {
                                    switch(v + '') {
                                        case '0':
                                            return '3';
                                        case '1':
                                            return '主管';
                                        case '2':
                                            return '4';
                                    }
                                }
                            },
                            splitLine: { // 分隔线
                                length: 15, // 属性length控制线长
                                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {
                                width: 2,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            data: [{
                                value: 0.5,
                                name: 'gas'
                            }]
                        },
                        {
                            name: '员工数',
                            type: 'gauge',
                            center: ['75%', '50%'], // 默认全局居中
                            radius: '30%',
                            min: 0,
                            max: 2,
                            startAngle: 315,
                            endAngle: 225,
                            splitNumber: 2,
                            axisLine: { // 坐标轴线
                                lineStyle: { // 属性lineStyle控制线条样式
                                    color: [
                                        [0.2, 'lime'],
                                        [0.8, '#1e90ff'],
                                        [1, '#ff4500']
                                    ],
                                    width: 2,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisTick: { // 坐标轴小标记
                                show: false
                            },
                            axisLabel: {
                                textStyle: { // 属性lineStyle控制线条样式
                                    fontWeight: 'bolder',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                },
                                formatter: function(v) {
                                    switch(v + '') {
                                        case '0':
                                            return '0';
                                        case '1':
                                            return '1';
                                        case '2':
                                            return '2';
                                    }
                                }
                            },
                            splitLine: { // 分隔线
                                length: 15, // 属性length控制线长
                                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {
                                width: 2,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            data: [{
                                value: count[2],
                                name: '主管'
                            }]
                        }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
     });
    // setInterval(function() {
    //     option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    //     option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
    //     option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
    //     option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
    //     myChart.setOption(option);
    // }, 2000)
</script>
</body>
</html>